<template>
    <div>
        <div class="big_box">
            <h5 class="first_h5">基本信息</h5>
            <el-form label-position="right" label-width="80px" :model="newRuleForm">
                <el-form-item label="模板名称: ">
                    <el-input v-model="newRuleForm.formwork_name"></el-input>
                </el-form-item>
                <el-form-item label="状态: ">
                    <template>
                        <el-radio v-model="form_state" label="1">启用</el-radio>
                        <el-radio v-model="form_state" label="2">禁用</el-radio>
                    </template>
                </el-form-item>
            </el-form>

            <h5>电费时段</h5>
            <el-table :data="newRuleForm.feeData" border style="width: 100%" :header-cell-style="{background:'#E7E9F0'}">
                <el-table-column prop="order" label="序号">
                    <template v-slot="scope">
                        <div style="color:#999999;">
                            <!-- <el-input v-if="scope.row.check" @blur="update(scope.row.order)" v-model="scope.row.order"></el-input> -->
                            <span v-if="scope.row.order" @click="fn(scope.row.order)">{{ scope.row.order }}</span>
                            <span v-else>{{ newRuleForm.feeData.length }}</span>
                            <!-- <el-input v-else @blur="onBlur()" v-model="addNewForm.order"></el-input> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="收费时段">
                    <template v-slot="scope">
                        <div style="color:#999999;">
                            <span v-if="scope.row.startTime">{{ scope.row.startTime }}-{{ scope.row.endTime }}</span>
                            <!-- <el-input v-else @blur="onBlur" v-model="addNewForm.interval"></el-input> -->
                            <div v-else>
                                <el-time-select
                                placeholder="起始时间"
                                v-model="startTime"
                                :picker-options="{
                                    start: '00:00',
                                    step: '00:15',
                                    end: '24:00',
                                }">
                                </el-time-select>
                                <el-time-select
                                style="margin-top: 5px;"
                                placeholder="结束时间"
                                v-model="endTime"
                                :picker-options="{
                                    start: '00:00',
                                    step: '00:15',
                                    end: '24:00',
                                    minTime: startTime
                                }">
                                </el-time-select>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="peak" label="峰值">
                    <template v-slot="scope">
                        <div style="color:#999999;">
                            <span v-if="scope.row.peak">{{ scope.row.peak }}</span>
                            <!-- <el-input @blur="onBlur" v-model="addNewForm.peak"></el-input> -->
                            <el-select v-else v-model="addNewForm.peak" placeholder="请选择">
                                <el-option
                                v-for="item in peakOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="chargeFee" label="充值费(元/度)">
                    <template v-slot="scope">
                        <div style="color:#999999;">
                            <span v-if="scope.row.chargeFee">{{ scope.row.chargeFee }}</span>
                            <el-input v-else @blur="onBlur" v-model="addNewForm.chargeFee"></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="serviceFee" label="服务费(元/度)">
                    <template v-slot="scope">
                        <div style="color:#999999;">
                            <span v-if="scope.row.serviceFee">{{ scope.row.serviceFee }}</span>
                            <el-input v-else @blur="onBlur" v-model="addNewForm.serviceFee"></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="total" label="总计">
                    <template v-slot="scope">
                        <div style="color:#999999;">
                            <span v-if="scope.row.total">{{ scope.row.total }}元/度</span>
                            <span v-else>{{ total == NaN ? 0 : total}}元/度</span>
                            <!-- <el-input v-else @blur="onBlur" v-model="addNewForm.total"></el-input> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="total" label="操作">
                    <template v-slot="scope">
                        <div style="color:#999999;">
                            <span class="deleteBtn" @click="deleteData(scope.$index)">删除</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="addBtn" v-if="!$route.query.detail">
                <el-button class="newAdd" @click="addGun"><i class="el-icon-plus"></i>添加时段</el-button>
            </div>
            <h5>应用电站</h5>
            <el-table v-if="$route.query.detail && $route.query.revise" :data="feeData" border style="width: 100%" :header-cell-style="{background:'#E7E9F0'}">
                <el-table-column prop="date" label="序号" width="180">
                </el-table-column>
                <el-table-column prop="name" label="收费时段" width="180">
                </el-table-column>
                <el-table-column prop="address" label="峰值">
                </el-table-column>
                <el-table-column prop="address" label="电费(元/度)">
                </el-table-column>
                <el-table-column prop="address" label="服务费(元/度)">
                </el-table-column>
                <el-table-column prop="address" label="总计">
                </el-table-column>
            </el-table>
        </div>
        <div class="footer" v-if="!$route.query.detail">
                <el-button class="cancel" @click="$router.push('/feeRules')">取消</el-button>
                <el-button v-if="$route.query.revise" class="confirm" @click="preserve('ruleForm')">保存</el-button>
                <el-button v-else class="confirm" @click="submitForm('ruleForm')">确定</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                startTime: '',
                endTime: '',
                peakOptions:[
                    {
                        value:1,
                        label:'谷值'
                    },
                    {
                        value:2,
                        label:'平直'
                    },
                ],
                form_state:'1',
                addNewForm:{
                }, // 新增对象
                newRuleForm:{
                    feeData:[
                    {
                        order:1,
                        startTime:'00:00',
                        endTime:'07:00',
                        peak:'谷值',
                        chargeFee:'0.6651',
                        serviceFee:'0.4800',
                        total:'1.0432',
                        check:false
                    },
                    {
                        order:2,
                        startTime:'00:00',
                        endTime:'07:00',
                        peak:'平值',
                        chargeFee:'0.6651',
                        serviceFee:'0.4800',
                        total:'1.0432',
                        check:false
                    }
                ],
                    chargeFeeForm:{}
                },
                stationData:[
                    {
                        order:1,
                        station_name:'丰台总部基地',
                        station_position:'北京市丰台区',
                        gun_count:0.6651,
                        pile_count:0.6651,
                    }
                ]
            }
        },
        computed:{
            total(){
                const a = (this.addNewForm.chargeFee -0) + (this.addNewForm.serviceFee-0)
                return a == NaN ? 0 : a
            }
        },
        methods: {
            addGun(){
                if(this.newRuleForm.feeData[this.newRuleForm.feeData.length-1].order) {
                    this.newRuleForm.feeData.push({})
                }else {
                    this.newRuleForm.feeData.pop(this.newRuleForm.feeData.length-1,1)
                    this.addNewForm = {}
                    this.startTime = ''
                    this.endTime = ''
                    console.log(this.newRuleForm.feeData[this.newRuleForm.feeData.length])
                }
            },
            onBlur(){ //失焦发送并重新渲染列表
                    if(this.addNewForm.serviceFee && this.addNewForm.chargeFee && this.endTime && this.startTime){
                        console.log(this.addNewForm,this.startTime,this.endTime)
                        this.addNewForm.total = (this.addNewForm.chargeFee - 0)  + (this.addNewForm.serviceFee - 0)
                        this.addNewForm.order = this.newRuleForm.feeData.length
                        this.addNewForm.startTime = this.startTime
                        this.addNewForm.endTime = this.endTime
                        this.newRuleForm.feeData.pop(this.newRuleForm.feeData.length-1,1)
                        this.addNewForm = {}
                        this.startTime = ''
                        this.endTime = ''
                        console.log('发送的添加对象',this.addNewForm)
                    }
            },
            fn(order) {
                console.log(order);
                this.newRuleForm.feeData.forEach((item)=>{
                    if(item.order == order) {
                        item.check = true;
                        return;
                    }
                })
                console.log( this.newRuleForm.feeData);
            },
            update(order) {
                console.log(order);
                this.newRuleForm.feeData.forEach((item)=>{
                    if(item.order == order) {
                        item.check = false;
                        return;
                    }
                })
            },
            deleteData(index){
                this.$confirm('您确定删除当前项吗', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    title:'操作提示',
                    center: true
                    }).then(() => {
                        this.newRuleForm.feeData.splice(index, 1)
                        this.$message({
                        // type: 'success',
                        // message: '删除成功!',
                        // offset:'50%'
                        dangerouslyUseHTMLString: true,
                        message: '<strong><i style="color:#165BFF;" class="el-icon-error"></i>删除成功</strong>'
                        });
                    }).catch(() => {
                        this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                    
                });
                console.log(index)
            },
            submitForm(){
                console.log('传送表单',this.newRuleForm)
            }
        },
    }
</script>

<style lang="less" scoped>
.big_box{
    margin-left: 100px;
    text-align: left;
    font-size: 14px;
}
h5{
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
}
.first_h5{
    margin-top: 24px;
    margin-bottom: 24px;
}
.el-input{
    width: 528px;
}
.addBtn{
    text-align: left;
    margin-top: 31.99px;
}
.newAdd{
    border: 0;
    background: #165BFF;
    color: white;
    width: 120px;
    height: 36px;
}
::v-deep .el-table th > .cell {
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}
.el-table .el-input{
    width: 180px;
}
.footer{
    text-align: center;
}
.cancel,.confirm{
    margin-top: 32px;
    font-size: 16px;
    padding: 14px 54px;
}
.cancel{
    margin-top: 5px;
    font-weight: 600;
    margin-left: 112px;
}
.confirm{
    background: #165bff;
    color: white;
    border: 0;
}
.deleteBtn{
    display: inline-block;
    color: #FA698D;
    cursor: pointer;
}
</style>
<style>
.el-message-box__header{
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    /* line-height: 16px; */
}
.el-message-box{
    width: 360px !important;
    height: 188px !important;
    background:#FFFFFF;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
}

.el-message-box__message{
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.el-message-box__btns{
    margin-top:38px ;
}
.el-button--small{
    width: 80px;
    height: 36px;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
}
.el-button--primary{
    width: 80px;
    height: 36px;
    background:#165BFF !important;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #165BFF;
    opacity: 1;
}
.el-textarea__inner {
    background: #f0f1f6 !important;
}
</style>
<style>
.el-textarea__inner {
    background: #f0f1f6 !important;
}
</style>